<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
	<head>
		<title>${projeto.nome}: ${requisito.tipo.nome}: ${requisito.nome}</title>
		
		<script type="text/javascript">
	
		jsool.onReady(function(){

			var add = jsool.get("add"),
				remove = jsool.get("remove"),
				requisitos = jsool.get("requisitos"),
				relacionamentos = jsool.get("relacionamentos"),
				selector = Raze.compile("option[selected]");


			
			function swap(ori, des){
				var opts = selector(ori.getDom());

				Array.iterate(opts,function(index, value){
					des.append(value);
				});
			}
			
			add.on('click',function(){
				swap(requisitos,relacionamentos);
			});


			remove.on('click',function(){
				swap(relacionamentos,requisitos);
			});

			jsool.get("submit").on("click",function(ev){
				relacionamentos.query("option").each(function(el){
					el.selected = true;
				});
			});
		});
		</script>
	</head>
	<body>
		<%@include file="painel-requisito.jsp" %>
		<div class="view-requisito full-height">
			<h2>Relacionamentos de "${requisito.nome}"</h2>
			
			<form method="post">
				<table class="data-table">
					<thead>
						<tr>
							<th>Requisitos</th>
							<th>&#160;</th>
							<th>Relacionamentos</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<select multiple="multiple" name="requisitos" id="requisitos">
									<c:forEach items="${requisitos}" var="requisito">
										<option value="${requisito.numero}">${requisito.nome}</option>
									</c:forEach>
								</select>
							</td>
							<td>
								<a class="jsool-button" id="add">
									<img alt="Adiciona relacionamento" src="/requisiteworks/images/arrow_right.png">
								</a>						
								<br />
								<br />
								<a class="jsool-button" id="remove">
									<img alt="remove relacionamento" src="/requisiteworks/images/arrow_left.png">
								</a>
							</td>
							<td>
								<select multiple="multiple" name="relacionamentos" id="relacionamentos">
									<c:forEach items="${relacionamentos}" var="relac">
										<c:if test="${relac.a eq requisito}">
											<option value="${relac.b.numero}">${relac.b.nome}</option>
										</c:if>
										
										<c:if test="${relac.b eq requisito}">
											<option value="${relac.a.numero}">${relac.a.nome}</option>
										</c:if>
									</c:forEach>
								</select>
							</td>
						</tr>
						
						
						<tr>
							<td colspan="3">
								<input type="submit" id="submit" value="Salvar"/>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>
	</body>
</html>